<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		
		
		$(function(){
			$("#country").change(function(){
				var country = $(this).val();
				var dataType = "xml";
				if(country != undefined && country != null){
					$.post(
						"${pageContext.request.contextPath}/cityServlet?dataType=" + dataType,
						{"country":country},//"country="+country,
						function(data){
							var $citySelect = $("#city");
							if("json" == dataType){
								if(data != null && data != undefined){
									var cities = data.cities;
									$citySelect.empty();
									$.each(cities,function(i,obj){
										$citySelect.append("<option>" + obj.city + "</option>");
									});
								} else {
									alert("操作失败");
								}
							} else {
								if(data != null && data != undefined){
								var $xmlDoc = $(data);
								var $cities = $xmlDoc.find("city");
								$citySelect.empty();
								$.each($cities,function(i,obj){
									$citySelect.append("<option>" + $(obj).text() + "</option>");
								});
								}
							}
						},
						dataType
					)
				}else{
					alert("请选择国家")
				}
			});
			
		})
	</script>
</head>
<body>
	国家:
	<select id="country">
	<option>请选择</option>
	<option value="中国">中国</option>
	<option value="美国">美国</option>
	</select>
	城市：
	<select id="city">
	<option>请先选择国家</option>
	</select>
</body>
</html>